<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				var num = document.getElementsByName("1");
				
				for(number of num){
					number.onchange = function(){
						var b = 0;
						for(number of num){
						if(number.checked){
							b++
						}
					}
					if(b == num.length){
						document.getElementById("ll").checked = true;
					}else{
						document.getElementById("ll").checked = false;
					}
				}
			}
		}
			function quan(b){
				var num = document.getElementsByName("1");
				
				for(i in num){
					num[i].checked = b.checked;
				}
			}
			function fan(a){
				var num = document.getElementsByName("1");
				for(i in num){
					num[i].checked = !num[i].checked;
				}
				
			}
		</script>
	</head>
	<body>
		<table border="1"  >
			<tr style="background-color: yellow;">
				<th >
					<input type="checkbox" onclick="quan(this) " id="ll"/>全选
				</th>
				<th >
					复选框全选示例 
				</th>
				<th style="width:20px;"></th>
				<th style="width:20px;"></th>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="1"/>1
				</td>
				<td>作用：</td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="1"/>2
				</td>
				<td>a.单击列头复选框全选或全不选子项</td>
				<td></td><td></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="1"/>3
				</td>
				<td>b.只要有一个子项没有选中，则取消列头的选中状态</td>
				<td></td><td></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="1"/>4
				</td>
				<td>c.当所有子项目选中时，列头复选框自动置为选中状态</td>
				<td></td><td></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="1"/>5
				</td>
				<td></td><td></td><td></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="1"/>6
				</td>
				<td></td><td></td><td></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="1"/>7
				</td>
				<td></td><td></td><td></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="1" />8
				</td>
				<td></td><td></td><td></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="1"/>9
				</td>
				<td></td><td></td><td></td>
			</tr>
			<tr>
				<td>
					<input type="checkbox" name="1"/>10
				</td>
				<td></td><td></td><td></td>
			</tr>
			<tr>
				<th>
					<input type="checkbox" onclick="fan(this)"/>反选
				</th>
				<th>
					反选示例
				</th>
				<th ></th><th></th>
			</tr>
		</table>
	</body>
</html>
